<template>
	<view :style="{background:background,position:position}" class="submit-button-box">
		<view class="submit-button"  :class="{ disabled: disabled }" :style="buttonStyleString" hover-class="u-hover-class" @click.stop="$u.throttle(submit, 500)">
			<up-loading-icon mode="flower" v-if="loading" :style="{color:buttonStyle&&buttonStyle.color?buttonStyle.color:''}" class="loading-icon"></up-loading-icon>
			<!-- <u-icon name="plus" v-if="plusIcon" class="plus-icon"></u-icon> -->
			<image class="left-icon" :src="leftIcon" v-if="leftIcon" :style="leftIconStyle"></image>
			<view class="submit-button-text">{{ text }}</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'submit-button',
	props: {
		text: {
			type: String,
			default: '保 存'
		},
		background: {
			type: String,
			default: ''
		},
		buttonStyle: {
			type: Object | null,
			default: null
		},
		plusIcon: {
			type: Boolean,
			default: false
		},
		loading: {
			type: Boolean,
			default: false
		},
		disabled: {
			type: Boolean,
			default: false
		},
		position:{
			type: String,
			default: 'fixed'
		},
		leftIcon:{
			type: String,
			default: ''
		},
		leftIconStyle:{
			type: Object,
			default: ()=>{}
		}
	},
	data() {
		return {};
	},
	onLoad() {},
	onReady() {},
	onShow() {},
	computed: {
		buttonStyleString() {
			let str = '';
			if (!this.buttonStyle) {
				return str;
			}
			for (let key in this.buttonStyle) {
				str += `${key}:${this.buttonStyle[key]};`;
			}
			return str;
		}
	},
	methods: {
		submit() {
			if (!this.disabled) {
				this.$emit('handleClick');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.submit-button-box {
	width: 100%;
	
	position: fixed;
	z-index: 10;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	max-width: 500px;
	padding: 24rpx;
	.submit-button {
		width: 100%;
		height: 98upx;
		border-radius: 49upx;
		font-weight: bold;
		color: #ffffff;
		font-size: 32upx;
		text-align: center;
		background: linear-gradient( 315deg, #43D9F0 0%, #5CE5D5 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		.left-icon{
			width:38rpx;
			height:38rpx;
			margin-right: 10rpx;
		}
		.plus-icon {
			margin-right: 10rpx;
			margin-bottom: 4rpx;
		}
	}
	.loading-icon{
		color: #ffffff;
	}
	.disabled {
		background: #DCE0E0;
		color: rgba(255, 255, 255, 0.6);
	}
}
.has-background {
	padding-top: 20rpx;
	background-color: #fff;
}
</style>
